# Component: Title

Responsive page header with device-specific typography

Typography Block

### BEM Anatomy

| Type      | Class Name          | Description                                                                                |
| --------- | ------------------- | ------------------------------------------------------------------------------------------ |
| ==Block== | `.as-title`         | The main container. Accepts an `OuterClass` for context-specific margins or positioning.   |
| Modifier  | `--mobile`          | Triggers a centered layout with specialized `3rem` typography and thin font weight.        |
| Element   | `__headline`        | The `h1` text element. Supports a `HeaderClass` for direct color or font-weight overrides. |
| Element   | `__horizontal-rule` | A decorative separator rendered exclusively in the mobile state.                           |

### Implementation Logic

The component uses a boolean `IsMobile` to toggle structural changes. On mobile devices, it injects a horizontal rule and applies centered, display-style typography. On desktop, it renders a standard headline without additional decorative elements.

##### Generated HTML (Mobile State)

```html
<div class="as-title as-title--mobile custom-wrapper">
    <h1 class="as-title__headline text-primary">Page Title</h1>
    <hr class="as-title__horizontal-rule" />
</div>
```

##### SCSS

```scss
.as-title {
  &--mobile {
    h1 {
      font-size: 3rem;      // Large impact
      font-weight: 300;     // Light/Thin style
      line-height: 1.2;
      text-align: center;   // Centered for mobile viewport
    }
  }
}
```
